<script setup>
import {
  User,
  EditPen,
  Connection,
  Iphone,
  Notification,
  More,
  Message,
  Check
} from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { getUserInfo, updateUserInfo } from '@/api/user.js'
defineOptions({
  name: 'AppPerson'
})
onMounted(async () => {
  const res = await getUserInfo()
  console.log(res)
  formData.value = res.data.data
  imgUrl.value = res.data.data.avatar
})

const imgUrl = ref('')

const upAvatar = (obj) => {
  imgUrl.value = URL.createObjectURL(obj.raw)
  formData.value.avatar = obj.raw
}

const readonly = ref({
  nickname: true,
  phone: true,
  email: true
})

const form = ref(null)

const formData = ref({})

const submit = async () => {
  const fd = new FormData()
  for (let i in formData.value) fd.append(i, formData.value[i])
  await updateUserInfo(fd)
  ElMessage.success('修改成功')
}
</script>

<template>
  <el-row class="my-5">
    <el-col :span="7">
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        router
      >
        <el-menu-item index="/person" class="justify-content-center">
          <el-icon>
            <user />
          </el-icon>
          <span>个人主页</span>
        </el-menu-item>
        <el-menu-item index="/tog" class="justify-content-center">
          <el-icon>
            <EditPen />
          </el-icon>
          <span>修改密码</span>
        </el-menu-item>
        <el-menu-item index="/necess" class="justify-content-center">
          <el-icon>
            <More />
          </el-icon>
          <span>用户须知</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="17">
      <div class="w-75 mx-auto">
        <div v-if="$route.path === '/person'">
          <el-form ref="form" :model="formData">
            <div class="d-flex justify-content-center">
              <el-form-item>
                <el-upload
                  class="avatar-uploader"
                  :show-file-list="false"
                  :on-change="upAvatar"
                  :auto-upload="false"
                >
                  <img
                    v-if="formData.avatar"
                    :src="imgUrl"
                    width="100"
                    height="100"
                    class="avatar"
                    style="border-radius: 50%"
                  />
                  <div class="block" v-else>
                    <el-avatar
                      shape="square"
                      :size="100"
                      :src="'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'"
                    />
                  </div>
                </el-upload>
              </el-form-item>
            </div>
            <el-form-item label="账户：">
              <el-input readonly v-model="formData.loginname">
                <template #prepend>
                  <el-icon>
                    <Connection />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="昵称：">
              <el-input
                :readonly="readonly.nickname"
                v-model="formData.nickname"
              >
                <template #prepend>
                  <el-icon>
                    <Notification />
                  </el-icon>
                </template>
                <template #append>
                  <el-button
                    :icon="readonly.nickname ? EditPen : Check"
                    @click="readonly.nickname = !readonly.nickname"
                    plain
                  ></el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="手机：">
              <el-input :readonly="readonly.phone" v-model="formData.phone">
                <template #prepend>
                  <el-icon>
                    <Iphone />
                  </el-icon>
                </template>
                <template #append>
                  <el-button
                    :icon="readonly.phone ? EditPen : Check"
                    @click="readonly.phone = !readonly.phone"
                    plain
                  ></el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="邮箱：">
              <el-input :readonly="readonly.email" v-model="formData.email">
                <template #prepend>
                  <el-icon>
                    <Message />
                  </el-icon>
                </template>
                <template #append>
                  <el-button
                    :icon="readonly.email ? EditPen : Check"
                    @click="readonly.email = !readonly.email"
                    plain
                  ></el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-text>个人简述:</el-text>
              <el-input type="textarea" v-model="formData.descr"> </el-input>
            </el-form-item>
            <el-form-item>
              <div class="w-100 d-flex justify-content-center">
                <el-button class="mx-3" type="info" plain> 取消 </el-button>
                <el-button class="mx-3" type="primary" plain @click="submit">
                  保存
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <router-view v-else></router-view>
      </div>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped></style>
